<template>
    <div class="login-bg">
        <div class="login-div">
            <div class="login">
                <img src="@/assets/images/logo.png" class="logo" />
                <div class="name">帅小黑后台管理系统</div>
                <input type="text" placeholder="手机号" v-model="phone" class="login-input">
                <input type="password" placeholder="密码" v-model="userPsw" class="login-input">
                <el-button type="primary" class="login-btn" @click="login">登陆</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
    data(){
        return {
            phone:'',
            userPsw:''
        }
    },
    computed: {
        ...mapGetters('user',['token','userInfo'])
    },
    methods:{
        login() {
            let { phone, userPsw } = this;
            this.$api.login({
                phone:phone,
                userPsw,userPsw
            }).then((ret) => {
                this.$com.setStorage('token',ret.data.id)
                this.$store.dispatch('user/setToken',ret.data.id)
                this.$router.push({path:'/index'})
            })
        }
    }
}
</script>

<style lang="scss">
    .login-bg{
        background: url(../../assets/images/login_bg.jpg) no-repeat;
        position: fixed;
        left:0;
        right: 0;
        width: 100%;
        height:100%;
        background-clip: cover;
    }
    .login-div{
        box-sizing: border-box;
        position:fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .login{
            padding: 40px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background: rgba(0,0,0,0.3);
            width: 360px;
            border-radius: 4px;
            .logo{
                width: 60px;
                height: 60px;
                border-radius: 4px;
            }
            .name{
                font-size: 20px;
                color: #000;
                margin:20px 0;
            }
            .login-input{
                box-sizing: border-box;
                line-height: 40px;
                margin-top: 20px;
                border:none;
                border-bottom: 1px solid #eee;
                width: 85%;
                padding-left: 15px;
                border-radius: 4px;
                outline: none;
                font-size: 14px;
                color: #222;
            }
            .login-btn{
                margin-top: 20px;
                width: 85%;
            }
        }
    }
</style>
